import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { Breadcrumb, Table,Button,Modal,message,Popconfirm,Input} from 'antd'
import AddGoods from './AddGoods.js'
import UpdateGoods from './UpdateGoods.js'
import {connect} from 'react-redux'
import { LoadGoodsActionAsync,deleteGoodsActionAsync,searchGoodsActionAsync,updateGoodsActionAsync } from '../../../redux/action/goodsAction'
const { Search } = Input
function GoodsMgr(props) {
  let ButtonStyle={margin:"15px"}
  useEffect(() => {
    props.LoadGoodsActionAsync(params)
  },[])
  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      align:'center',
      ellipsis:true,
    },
    {
      title: '价格',
      dataIndex: 'price',
      align:'center',
      ellipsis:true,
    },
    {
      title: '数量',
      ellipsis:true,
      dataIndex: 'number',
      align:'center',
    },
    {
      title: '描述',
      ellipsis:true,
      dataIndex: 'describe',
      align:'center',
    },
    {
      title: '图片',
      ellipsis:true,
      dataIndex: 'avatar',
      align:'center',
      render:(status,row)=><img src={status} alt='' style={{width:'50px',height:'50px',borderRadius:'50%'}}/>
    },
    {
      dataIndex: 'del',
      title:'编辑',
      ellipsis:true,
      align:'center',
      render:(del,row)=>{
        return(
          <div>
            <Button type='primary' style={{marginRight:'15px'}} onClick={()=>{
              setShowEditGoodsDialog(true)
              setSelectedRowKey([row.key])
            }}>编辑</Button>
            <Popconfirm
              onConfirm={()=>{
                deleteGoods(row.key)
              }}
              okText='确认'
              cancelText='取消'
              title='你确认要删除吗?'
            >
                <Button type='danger'>删除</Button>
            </Popconfirm>
          </div>
        )
      }
    }
  ]
  const [params,setParams] = useState({page:1,limit:4})
  const [showAddGoodsDialog,setshowAddGoodsDialog] = useState(false)
  const [selectedRowKeys,setSelectedRowKeys] = useState([])
  const [selectedRowKey,setSelectedRowKey] = useState([])
  const [showEditGoodsDialog,setShowEditGoodsDialog] = useState(false)
  const GoodsRowSelection={
    onChange:(selectedRowKeys,selectedRows)=>{
      setSelectedRowKeys(selectedRowKeys)
    }
  }
  async function changePage(page,pageSize){

    await setParams({page,pageSize})
    props.LoadGoodsActionAsync(params)
  }
  function hideAddGoodsDialog(){
    setshowAddGoodsDialog(false)
  }
  const handleDelete=()=>{
    if(selectedRowKeys.length<=0)
    {
      message.warn('你还未选中任何数据')
      return
    }
    Modal.confirm({
      title:'你确定要删除吗?',
      okText:'删除',
      cancelText:'取消',
      onOk:()=>{
        props.deleteGoodsActionAsync(selectedRowKeys)
        props.LoadGoodsActionAsync()
        setSelectedRowKeys([])
      }
    })
  }
  const deleteGoods=(key)=>{
    props.deleteGoodsActionAsync([key])
    props.LoadGoodsActionAsync()
    message.success('删除成功!')
  }
  const updateGoods=()=>{
    if(selectedRowKeys.length<=0)
    {
      message.warn('你还未选中任何数据')
      return
    }
    if(selectedRowKeys.length===1)
    {
      setShowEditGoodsDialog(true)
      setSelectedRowKey(selectedRowKeys)
    }
    else{
      message.error('你不能选择多条数据修改!')
    }
  }
  return (
    <div>
      <Breadcrumb>
        <Breadcrumb.Item>
          <Link to='/home'>首页</Link>
        </Breadcrumb.Item>
        <Breadcrumb.Item>
          <Link to='/home/goods_mgr'>商品管理</Link>
        </Breadcrumb.Item>
      </Breadcrumb>
      <hr/>
    <Button type="primary" onClick={()=>{setshowAddGoodsDialog(true)}} style={ButtonStyle}>添加</Button>
    <Button type="danger" style={ButtonStyle} onClick={handleDelete}>删除</Button>
    <Button type="primary" style={ButtonStyle} onClick={updateGoods}>修改</Button>
    <Search placeholder='搜索/按名称'
      style={{margin:'15px',width:'300px'}}
      enterButton
      onSearch={(value,e)=>{let v={value};props.searchGoodsActionAsync(v)}}
    ></Search>
    <Button type="primary" style={ButtonStyle} onClick={()=>{props.LoadGoodsActionAsync(params)}}>显示全部</Button>
    <Table 
      dataSource={props.GoodsList} 
      columns={columns} 
      rowSelection={{
        type: 'checkbox',
        ...GoodsRowSelection,
      }}
      rowKey='key'
      pagination = {{pageSize:4,onChange:changePage}}
    />
    <AddGoods visible={showAddGoodsDialog} close={hideAddGoodsDialog}></AddGoods>
    <UpdateGoods visible={showEditGoodsDialog} selectedRowKey={selectedRowKey} close={()=>{
      setShowEditGoodsDialog(false)
    }}></UpdateGoods>
    </div>
  )
}
//使用connect()()创建并暴露一个Count的容器组件
export default connect(
	state => ({
    GoodsList:state.goodsList
	}),
	{LoadGoodsActionAsync,deleteGoodsActionAsync,searchGoodsActionAsync,updateGoodsActionAsync}
)(GoodsMgr)
